<script setup>
import { ref } from 'vue'
import UploadVedio from "@/views/UploadView/Components/UploadVedio.vue";
import UploadArticle from "@/views/UploadView/Components/UploadArticle.vue";

const activeIndex = ref('1')//默认1
const handleSelect = (key, keyPath) => {
  activeIndex.value = `${key}`
}



</script>

<template>
  <div class="TestPage1">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
    >
      <el-menu-item index="1">视频投稿</el-menu-item>
      <el-menu-item index="2">专栏投稿</el-menu-item>
    </el-menu>


    <div class="TestPage1-content" v-if="activeIndex==='1'">
      <UploadVedio></UploadVedio>
    </div>
    <div class="TestPage1-content" v-if="activeIndex==='2'">
      <UploadArticle></UploadArticle>
    </div>

  </div>
</template>

<style scoped lang="less">
.TestPage1 {
  width: 1100px;
  margin: 20px auto 0 auto;
  min-height: calc(100% - 20px);
  background-color: #ffffff;

  .TestPage1-content{
    width: 100%;
    height: 100%;
  }

  .el-menu-item{
    line-height: 64px;
    padding-bottom: 18px;
    padding-top: 26px;
    margin-left: 40px;
    font-size: 16px;
    color: #505050;
    font-weight: 500;
    background-color: white !important;
    &:hover .is-active{
      background-color: white !important;
    }

  }
}
</style>
